import * as THREE from 'three';
// 导入 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { gsap } from 'gsap';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';

import girlGltf from '../assets/module/珍珠耳环少女.glb'
/**
 *  目标：导入 blender 导出的 珍珠少女 模型，并渲染 和添加灯光 且眼球跟着鼠标晃动
 */



// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 0, 7)
scene.add(camera);

let eyeBlack = []
// 眼球的最大和最小位置
const leftEyeRange = { x: [-0.8, -0.66], y: [0.48, 0.6] };
const rightEyeRange = { x: [0, 0.16], y: [0.20, 0.3] };

// 导入 孔明灯 模型
const loader = new GLTFLoader();
loader.load(girlGltf, (gltf) => {
    const model = gltf.scene;
    eyeBlack = model.children.filter(it=>it.name=='左眼黑' || it.name=='右眼黑')
    scene.add(model)
})




// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 打光
const rectLight = new THREE.RectAreaLight( 0xFFF4E2, 2,  10, 10 );
rectLight.position.set( -6, 6, 5  );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

const backRectLight = new THREE.RectAreaLight( 0xFFFFFF, 1,  10, 10 );
backRectLight.position.set( 6, 10, -3  );
backRectLight.lookAt( 0, 0, 0 );
scene.add( backRectLight )

const backRectLight2 = new THREE.RectAreaLight( 0xFFFFFF, 1,  10, 10 );
backRectLight2.position.set( -3, 10, -2  );
backRectLight2.lookAt( 0, 0, 0 );
scene.add( backRectLight2 )


// const rectLightHelper = new RectAreaLightHelper( rectLight );
// scene.add( rectLightHelper );
// const rectLightHelper2 = new RectAreaLightHelper( backRectLight );
// scene.add( rectLightHelper2 );
// const rectLightHelper3 = new RectAreaLightHelper( backRectLight2 );
// scene.add( rectLightHelper3 );


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);


// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
// renderer.render(scene,camera)

// 创建轨道控制器 (相机,用于渲染的dom)
const controls = new OrbitControls(camera, renderer.domElement);

renderer.shadowMap.enabled = true;


// 开启阻尼
controls.enableDamping = true;

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);

// 设置 clock
const clock = new THREE.Clock();

let mouseX = 0, mouseY = 0;
// 鼠标移动事件
// 鼠标移动事件
document.addEventListener('mousemove', (event) => {
    // 更新鼠标位置
    mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});
// 更新眼球位置的函数
function updateEyePosition(eye, range) {
    // 根据鼠标位置和眼球范围计算新位置
    eye.position.x = range.x[0] + (mouseX * (range.x[1] - range.x[0]));
    eye.position.y = range.y[0] + (mouseY * (range.y[1] - range.y[0]));
}
/**
 * 渲染函数
 * L = V*T   距离 = 速度 * 时间
 */
function render() {
    if(eyeBlack.length == 2){
    // 根据鼠标位置更新眼球的位置
        updateEyePosition(eyeBlack[0], leftEyeRange);
        updateEyePosition(eyeBlack[1], rightEyeRange);
    }

    controls.update()
    renderer.render(scene, camera)

    // 浏览器自带的 请求动画帧的方法 ，这里设置 没一帧都调用一下 render 函数
    requestAnimationFrame(render)
}
render();

// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 重新设置相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新设置相机的裁剪面(投影矩阵)
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
}
